<template>
    <div>
        <div class="box">
        <div class="header">
            <span class="el-icon-info"></span>&nbsp;
            <span style="font-size: 14px;">添加商品信息</span>
        </div>
        <el-steps :active="active" style="width:1100px;margin:auto;" finish-status="success">
            <el-step title="基本信息">
            </el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <div style="height: 300px;margin-left: -50px; margin-top: 40px; display:inline-block;vertical-align: top;">
            <el-steps direction="vertical" :active="active">
                <el-step style="cursor: pointer;" @click.native="active=0" title="基本信息"></el-step>
                <el-step style="cursor: pointer;" @click.native="active=1" title="商品参数"></el-step>
                <el-step style="cursor: pointer;" @click.native="active=2" title="商品属性"></el-step>
                <el-step style="cursor: pointer;" @click.native="active=3" title="商品图片"></el-step>
                <el-step style="cursor: pointer;" @click.native="active=4" title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
        </div>
        <!-- 商品信息 -->
        <div v-show="active==0" class="jiben" style="width: 50vw;"> 
            <el-form ref="form" :model="form" label-width="80px" row-key="cat_id" :data="spfl">
                    <br>
                    <el-form-item label="商品名称:">
                        <el-input v-model="form.goods_name"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="商品价格:">
                        <el-input type="number" v-model.number="form.goods_price"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item  label="商品数量:">
                        <el-input type="number" v-model.number="form.goods_number"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item  label="商品重量:">
                        <el-input type="number" v-model.number="form.goods_weight"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="商品分类:">
                        <el-select ref="selectTree" v-model="value" placeholder="请选择商品分类">
                            <el-option 
                            :key="form.goods_cat"
                            :value="form.goods_id" 
                            :lazy="form.goods_cat" 
                            hidden/>
                            <el-tree :data="spfl"
                            :props="defaultProps"
                            node-key="goods_id"
                            accordion
                            highlight-current
                            @node-click="handleNodeClick"/>
                        </el-select>
                    </el-form-item>
                </el-form>
        </div>
        <!-- 商品参数 -->
        <div v-show="active==1" class="jiben" style="width: 50vw;"> 
            <el-form  :model="form" label-width="80px">
                <el-form-item label="参数类型" :label-width="formLabelWidth"  >
                        <el-select v-model="flcs.sel" >
                            <el-option
                             @click.native="xzcs" label="静态参数" value="only"></el-option>
                            <el-option @click.native="xzcs" label="动态参数" value="many"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="选择参数" :label-width="formLabelWidth"  >
                        <el-select :value="form.attr_name" >
                            <el-option :key="form.attr_id" :value="form.attr_id" :label="form.attr_name" hidden></el-option>
                            <el-tree :data="canshu" show-checkbox :props="defaultProps1" node-key="attr_id" accordion
                            highlight-current @check-change="handleNodeClick1"></el-tree>
                        </el-select>
                </el-form-item>
            </el-form>
        </div>
        <!-- 商品介绍 -->
        <div v-show="active==2" class="jiben" style="width: 50vw;"> 
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item  label="商品介绍:">
                <el-input type="textarea" :rows="10" v-model="form.goods_introduce"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- 图片上传 -->
        <div v-show="active==3" class="jiben" style="width: 50vw;"> 
            <el-upload
                class="upload-demo"
                action="https://lianghj.top:8888/api/private/v1/tmp_uploads"
                :headers=header
                :on-success="handlePreview"
                :on-remove="handleRemove"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </div>

        <el-button  style="position: absolute;left: 30px;bottom:10px;" @click="next1">上一步</el-button>
        <el-button v-if="active!=5" style="position: absolute;right: 30px;bottom:10px;" @click="next">下一步</el-button>
        <el-button v-if="active==5" style="position: absolute;right: 30px;bottom:10px;" @click="wancheng">完成</el-button>
        </div>
    </div>
</template>

<script>
import {tjsp} from '../../../request/api/goods/bjsp'
import {spflrequest,flcsrequest} from '../../../request/api/goods/spfl'
export default {
    data(){
        return{
            form:{
                goods_name : "",
                goods_cat: "",
                goods_price:"",
                goods_number:"",
                goods_weight:"",
                attr_name:'',
                goods_introduce:'',
                pics:[],
                attrs:[{
                    attr_id:'',
                    attr_value:''
                }]
            },
            spfl:[],
            active:0,
            defaultProps: {
                children: 'children',
                label: 'cat_name'
            },
            defaultProps1: {
                children: 'children',
                label: 'attr_name'
            },
            value:'',
            flcs:{
                id:'',
                sel:'only',
            },
            canshu:[],
            formLabelWidth:'120px',
            header:{Authorization:sessionStorage.getItem('token')}
        }
    },
    created(){
        spflrequest('').then(res=>{
            this.spfl=res.data.data
            console.log(this.spfl);
        })
    },
    methods:{
        wancheng(){
            tjsp(this.form).then(res=>{
                if(res.data.meta.status==201){
                this.$router.push('/spgl/splb')
                }else {
                    console.log(res);
                    this.active=0
                }
            })
        },
        next() {
            console.log(this.form);
            if (this.active++ > 4) this.active = 0;
            if(this.active==1){
                 flcsrequest(this.flcs).then(res=>{
                    this.canshu=res.data.data
                })
            }
           
        },
        next1() {
            if(this.active==0){
                this.active=0
            }else{
                this.active--
            }
            
           
        },
        // 选择分类
        handleNodeClick(data){
            console.log(data);
            this.flcs.id=data.cat_id
            this.spfl.map(item=>{
                if(item.children){
                    item.children.map(x=>{
                        if(x.cat_id==data.cat_pid&&x.cat_pid==item.cat_id){
                            this.value=item.cat_name+'/'+x.cat_name+'/'+data.cat_name
                            this.form.goods_cat=item.cat_id+','+x.cat_id+','+data.cat_id
                            this.$refs.selectTree.blur()
                        } 
                    })
                }     
            })
            
        },
        // 选择参数
        handleNodeClick1(data,check){
            console.log(data,check);
            if(check){
                if(!this.form.attrs[0].attr_id){
                    this.form.attrs[0].attr_id=data.attr_id
                }else{
                    let arr=[{attr_id:data.attr_id,attr_value:''}]
                    this.form.attrs.push(arr[0])
                }
            }else{          
                let arr=[{attr_id:data.attr_id,attr_value:''}]
                this.form.attrs.map((item,i)=>{
                    item.attr_id==arr[0].attr_id
                    this.form.attrs.splice(i,1)
                })
            }
            console.log(this.form.attrs);
            this.form.attr_name=data.attr_name
        },
        xzcs(){
            console.log(this.flcs.sel);
            flcsrequest(this.flcs).then(res=>{
                    this.canshu=res.data.data
            })
        },
        // 图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
            let url=fileList.url
            let arr={pic:url}
                this.form.pics.map((item,i)=>{
                    item==arr[0]
                    this.form.pics.splice(i,1)
                })
        },
        handlePreview(file,fileList) {
            let url=fileList.url
            let arr={pic:url}
            // this.form.pics.push(arr)
        }
    }
}
</script>

<style scoped>
    .box{
        height: 78vh;
        padding: 20px;
        background-color: white;
        overflow: hidden;
        position: relative;
    }
    .header{
        width: 100%;
        height: 40px;
        border-radius: 3px;
        text-align: center;
        line-height: 40px;
        margin-bottom: 20px;
        background-color: #F4F4F5;
        color: #818181;
    }
    .jiben{
        display: inline-block;
        vertical-align: top;
        margin-left: 30px;
        margin-bottom: 40px;
        margin-top: 10px;
        height: 52vh;
        padding: 10px 20px;
    }
</style>